import { Card, Row, Col, Progress } from 'antd'
import PropTypes from 'prop-types'
import './index.scss'

const ReadingProgress = ({ progressData }) => {
  return (
    <Card title="本月阅读目标">
      <Row gutter={16}>
        {progressData.map((item, index) => (
          <Col xs={24} sm={8} key={index}>
            <div className="progress-item">
              <div className="progress-header">
                <span>{item.label}</span>
                <span className="progress-value">{item.percent}%</span>
              </div>
              <Progress percent={item.percent} strokeColor={item.color} />
            </div>
          </Col>
        ))}
      </Row>
    </Card>
  )
}

ReadingProgress.propTypes = {
  progressData: PropTypes.arrayOf(
    PropTypes.shape({
      label: PropTypes.string.isRequired,
      percent: PropTypes.number.isRequired,
      color: PropTypes.string.isRequired
    })
  ).isRequired
}

export default ReadingProgress
